<template>
  <div class="products">
    <h3>商品管理</h3>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>库存</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(product, index) in products" :key="index">
          <td><input v-model="product.name" /></td>
          <td><input v-model.number="product.price" /></td>
          <td><input v-model.number="product.stock" /></td>
          <td><button @click="updateProduct(product)">更新</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      products: [
        { name: 'T恤', price: 199, stock: 100 },
        { name: '帽子', price: 159, stock: 80 },
        { name: '手链', price: 99, stock: 50 }
      ]
    }
  },
  methods: {
    updateProduct(product) {
      alert(`商品 ${product.name} 更新成功`);
    }
  }
}
</script>